<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="item of breadcrumbs" :key="item.path">
        <span class="breadcrumb-title">{{ item.meta.title }}</span>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component({
  name: "LyBreadcrumb",
  components: {},
})
export default class LyBreadcrumb extends Vue {
  //#region vue prop =================================

  //#endregion
  //#region watch =================================
  @Watch("$route", { immediate: true }) routeChanged() {
    //
    this.generatorBreadcrumb();
  }
  //#endregion
  //#region vue data =================================
  private breadcrumbs: any[] = [];
  //#endregion
  //#region computed getter =================================

  //#endregion
  //#region vue life =================================
  // created() {
  //   console.log("LyBreadcrumb " + "created");
  // }

  mounted() {
    // console.log("LyBreadcrumb " + "mounted");
    this.generatorBreadcrumb();
  }
  //
  // beforeDestroy() {
  //   console.log("LyBreadcrumb " + "beforeDestroy");
  // }

  //#endregion
  //#region comp getter =================================

  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================
  private generatorBreadcrumb() {
    this.breadcrumbs = this.$route.matched.filter((it) => {
      return it.meta && it.meta.title;
    });
  }
  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>
<style lang="scss"></style>
<style lang="scss" scoped></style>
